<template>
    <view class="pages">
        <u-sticky bgColor="#fff">
            <u-tabs :list="list" :current="current" @change="ChangeHandler"></u-tabs>
        </u-sticky>
        <view class="content" v-if="update">
            <scroll-view scroll-y>
                <template v-for="(item,index) in houseDataList">
                    <u-gap height="10"></u-gap>
                    <view class="album">
                        <view class="album__avatar">
                            <image :src="item.avatar" mode="" style="width: 36px;height: 36px;"></image>
                        </view>
                        <view class="album__content">
                            <u--text margin="0 0 8px 0" :text="item.nickname || 'asdjidao'" type="primary" bold size="18"></u--text>

                            <u--text margin="0 0 5px 0" :text="'小区地址：' + item.s_name"></u--text>
                            <u--text margin="0 0 5px 0" :text="'产证面积：' + item.area"></u--text>
                            <u--text margin="0 0 5px 0" :text="'房源户型：' + item.room_types"></u--text>
                            <u--text margin="0 0 5px 0" :text="'房屋押金：' + item.lease_priec"></u--text>
                            <u--text margin="0 0 5px 0" :text="'房屋租金：' + item.deposit_priec"></u--text>
                            <u--text margin="0 0 5px 0" :text="'付款方式：' + item.lease_mode"></u--text>
                            <u--text margin="0 0 5px 0" :text="'剩余租期：' + item.surplus_date"></u--text>
                            <u--text margin="0 0 5px 0" :text="'利润差价：' + item.profit_difference"></u--text>
                            <u--text margin="0 0 5px 0" :text="'交通优势：' + item.advantage"></u--text>
                            <u--text margin="0 0 5px 0" :text="'物品信息：' + item.Item"></u--text>
                            <u--text margin="0 0 5px 0" :text="'期望佣金：' + item.comm_price"></u--text>
                            <u--text margin="0 0 5px 0" :text="'转让费用：' + item.trustee_price"></u--text>
                            <u--text margin="0 0 5px 0" :text="'其他说明：' + item.remark"></u--text>

                            <u-album :urls="item.img.split(',')" multipleSize="100"></u-album>
                        </view>
                    </view>
                    <u-gap height="10"></u-gap>
                    <u-line></u-line>
                </template>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "realtime",
        data() {
            return {
                loading: false,
                current: 0,
                update: true,
                list: [{
                    name: '托管房源',
                    type: 1
                }, {
                    name: '转让房源',
                    type: 2
                }, {
                    name: '房东直租',
                    type: 3
                }],
                houseDataList:[],
                // urls2: [
                //     'https://cdn.uviewui.com/uview/album/1.jpg',
                //     'https://cdn.uviewui.com/uview/album/2.jpg',
                //     'https://cdn.uviewui.com/uview/album/3.jpg',
                //     'https://cdn.uviewui.com/uview/album/4.jpg',
                //     'https://cdn.uviewui.com/uview/album/5.jpg',
                //     'https://cdn.uviewui.com/uview/album/6.jpg',
                //     'https://cdn.uviewui.com/uview/album/7.jpg',
                //     'https://cdn.uviewui.com/uview/album/8.jpg',
                //     'https://cdn.uviewui.com/uview/album/9.jpg',
                //     'https://cdn.uviewui.com/uview/album/10.jpg',
                // ],

            }
        },
        methods:{
            ChangeHandler(e){
                uni.showLoading({title: '正在加载'});
                this.current = e.index;

                uni.$u.http.post('/api.php/house/real_house_all', {type:e.type}).then(res => {
                    uni.hideLoading();
                    this.houseDataList = res;
                });
                // 更新 houseDataList

                // 刷新组件
                this.reload();
            },
            reload() {
                // 移除组件
                this.update = false;
                // 在组件移除后，重新渲染组件
                // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
                this.$nextTick(() => {
                    this.update = true
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .pages {
        width: 100%;
        min-height: 100vh;
        background-color: RGBA(245, 245, 245, 1);
    }

    .content {
        padding: 20rpx;
    }

    .album {
        @include flex;
        align-items: flex-start;

        &__avatar {
            background-color: $u-bg-color;
            padding: 5px;
            border-radius: 3px;
        }

        &__content {
            margin-left: 10px;
            flex: 1;
        }
    }
</style>